<template>
<div id="applicationList">
  <a-table
      :data="data"
      :pagination="{
            total: pagination.total,
            pageNum: pagination.pageNum,
            pageSize: pagination.pageSize,
          }"
      @page-change="changePage"
      column-resizable
      :columns="columns"
      style="margin-bottom: 20px"
  >
    <template #empty>
      <a-empty>
        先创建房间吧
      </a-empty>
    </template>
    <template #tags="{ record }">
      <a-space wrap>
        <a-tag v-for="tag in record.tags" :key="tag" color="green"
        >{{ tag }}
        </a-tag>
      </a-space>
    </template>
    <template #type="{ record }">
      <a-tag v-if="record.type === RoomTypeEnum.PUBLIC.code" :color="RoomTypeEnum.PUBLIC.color">
        {{ RoomTypeEnum.PUBLIC.text }}
      </a-tag>
      <a-tag v-else-if="record.type === RoomTypeEnum.SECRET.code" :color="RoomTypeEnum.SECRET.color">
        {{ RoomTypeEnum.SECRET.text }}
      </a-tag>
      <a-tag v-else-if="record.type === RoomTypeEnum.PRIVATE.code" :color="RoomTypeEnum.PRIVATE.color">
        {{ RoomTypeEnum.PRIVATE.text }}
      </a-tag>
    </template>
    <template #avatar="{ record }">
      <a-avatar shape="square">
        <img alt="avatar" :src="record.avatar"/>
      </a-avatar>
    </template>
    <template #count="{ record }">
      {{ record.count + '/' + record.max }}
    </template>
    <template #createTime="{ record }">
      {{ moment(record.createTime).format("YYYY-MM-DD") }}
    </template>
    <template #optional="{ record }">
      <a-link status="normal" @click.prevent="editRoom(record.id)">管理</a-link>
    </template>
  </a-table>
</div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import moment from "moment";
import {RoomTypeEnum} from "/src/common/enums/room"
import CreateRoom from "./CreateRoom.vue";
import {RoomControllerService} from "../../apis";
import {Message} from "@arco-design/web-vue";

const columns = [
  {
    title: "房号",
    dataIndex: "id",
  },
  {
    title: "头像",
    slotName: "avatar",
  },
  {
    title: "名称",
    dataIndex: "title",
  },
  {
    title: "描述",
    dataIndex: "description",
    width: 350
  },
  {
    title: "类型",
    slotName: "type",
  },
  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "状态",
    slotName: "status",
  },
  {
    title: "房主",
    dataIndex: "owner",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
const data = ref([]);
const pagination = ref({
  title: "",
  tags: [],
  total: 5,
  pageSize: 5,
  pageNum: 1,
});
const createRoomShow = ref(false);

const editRoom = (id) => {
  createRoomShow.value = true;
}
const createRoom = () => {
  createRoomShow.value = true;
}

const changePage = (pageNum) => {
  pagination.value.pageNum = pageNum;
  getData();
};
const handleSearch = () => {
  pagination.value.pageNum = 1;
  getData();
};
const handleReset = () => {
  pagination.value.pageNum = 1;
  pagination.value.tags = [];
  pagination.value.title = "";
  getData();
};

const getData = async () => {
  const res = await RoomControllerService.listApplyRecord({...pagination.value});
  if (res.code === 200) {
    data.value = res.data.records;
    data.value.forEach(x => {

    })
    pagination.value.total = res.data.total;
  } else {
    Message.error(res.msg);
  }
};

onMounted(() => {
  getData();
});
</script>

<style scoped>

</style>
